<template>
	<view class="">
		<fu-custom :isBack="true" :isBottom="true" bgColor="bg-white">
			<view slot="content">{{i18n["修改密码"]}}</view>
		</fu-custom>
		<view class="fu-fs28">
				<!-- 旧密码 start -->
				<view class="padding-lr bg-white">
					<view class="flex align-center justify-between padding-tb solid-bottom">
						<text class="width-160 margin-right">{{i18n['旧密码']}}</text>
						<input class="flex-sub" type="text" maxlength="12" value="" :password="showPassOld" v-model="oldPassworl"
						 :placeholder="i18n['请输入旧密码']" placeholder-style="color:#999;" />
					</view>
				</view>
				<!-- 旧密码 end -->
				<!-- 新密码 start -->
				<view class="padding-lr bg-white">
					<view class="flex align-center justify-between padding-tb solid-bottom">
						<text class="width-160 margin-right">{{i18n['新密码']}}</text>
						<input class="flex-sub" type="text" maxlength="12" value="" :password="showPassNew" v-model="newPassworl"
						 :placeholder="i18n['请输入新密码']" placeholder-style="color:#999;" />
					</view>
				</view>
				<!-- 新密码 end -->
				<!-- 确认没密  start   -->
				<view class="padding-lr bg-white">
					<view class="flex align-center justify-between padding-tb solid-bottom">
						<text class="width-160 margin-right">{{i18n['确认新密码']}}</text>
						<input class="flex-sub" type="text" maxlength="12" value="" :password="showPassConfirm" v-model="confirmPassworl"
						 :placeholder="i18n['请再次输入新密码']" placeholder-style="color:#999;" />
					</view>
				</view>
				<!-- 确认密码 end -->
		</view>
		<!-- 提交按钮 start -->
		<view class="btn fu-fs32 bg-theme height-88 line-height-88 round text-white text-center margin-lr" @click="tappass">{{i18n['完成']}}</view>
		<!-- 提交按钮 end -->
		<!-- 网络检测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络检测 end -->
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/index' //引入内容是否合法性方法
	export default {
		data() {
			return {
				oldPassworl: '', //旧密码
				newPassworl: '', //新密码
				confirmPassworl: '', //确认密码
				showPassOld: true, //是否暗文显示旧密码
				showPassNew: true, //是否暗文显示新密码
				showPassConfirm: true, //是否暗文显示输入的确认密码
			};
		},
		onLoad() {
		},
		methods: {
			tappass() {
				if (!this.oldPassworl) {
          return this.$message.info(this.i18n['请输入旧密码'])
				}
				//检测旧密码的合法性
				if (!validate(this.oldPassworl, 'password')) {
					return this.$message.info(this.i18n['请输入字母加数字6-12位旧密码']);
				}
				if (!this.newPassworl) {
          return this.$message.info(this.i18n['请输入新密码'])
				}
				//检测新密码的合法性
				if (!validate(this.newPassworl, 'password')) {
					this.$message.info(this.i18n['请输入字母加数字6-12位新密码']);
					return false;
				}
				//检测旧密码和新密码不能一样
				if (this.oldPassworl === this.newPassworl) {
          return this.$message.info(this.i18n['新密码与旧密码一致，请重新输入'])
				}
				if (this.newPassworl != this.confirmPassworl || !this.confirmPassworl) {
          return this.$message.info(!this.confirmPassworl ? this.i18n['请输入确认新密码'] : this.i18n['新密码不一致，请重新输入']);
				}
				let formData = {
					security_code: this.oldPassworl,
					password: this.newPassworl,
					password_code: this.confirmPassworl
				}
        this.$util.debounce(()=>{
          this.$api.post(global.apiUrls.postForgetPasswordCode, formData).then(res => {
          	this.$message.info(res.data.msg)
          	if (res.data.code == 1) {
          		//修改成功返回上一级
          		uni.clearStorageSync()
          		setTimeout(() => {
                this.$store.commit('logout');
                this.$store.dispatch('getCartList')
          			uni.switchTab({
          				url: '/pages/tab/my/my/index'
          			})
          		}, 1000)
          	}
          });
        })
			},
		}
	};
</script>

<style lang="scss" scoped>
	//提交按钮 start
	.btn {
    position: fixed;
    bottom: 56rpx;
    left: 0;
    right: 0;
  }
	//提交按钮 end
</style>
